<template>
	<!-- joinshop集团确认 -->
	<view class="j_wp">
		<!-- <view class="j_nav">
			<view class="j_n_item" :class="{active:tabIndex===0}" @click="TabClick(0)">待确认</view>
			<view class="j_n_item" :class="{active:tabIndex===1}" @click="TabClick(1)">已加入</view>
			<view class="j_n_item" :class="{active:tabIndex===2}" @click="TabClick(2)">已拒绝</view>
		</view> -->
		<view class="j_list">
			<view class="j_l_item" v-for="(item,index) in list" :key="index">
				<view class="j_l_title">{{item.name}}</view>
				<view class="j_l_buttons">
					<text v-if="item.status==='1'">已加入</text>
					<text v-if="item.status==='-1'">已拒绝</text>
					<button v-if="item.status==='0'" size="mini" type="default"
						@click="operation('1',index)">确认</button>
					<button v-if="item.status==='0'" size="mini" type="default"
						@click="operation('-1',index)">拒绝</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,

				list: [],
			}
		},
		onLoad() {
			this.getlist();
		},
		methods: {
			operation(status, i) {
				let obj = {
					status,
					id: this.list[i].id,
				};
				this.$axios('info/groupCheck', 'POST', 'supplier', obj).then(res => {
					if (res.data.code == 200) {
						this.list[i].status = status == '1' ? '1' : '-1';
						let msg = status == '1' ? '加入成功' : '拒绝加入';
						this.$api.msg(msg);
					}
				})
			},
			getlist() {
				this.$axios('info/groupList ', 'POST', 'supplier').then(res => {
					if (res.data.code == 200) {
						this.list = this.list.concat(res.data.data);
					}
				})
			},
			TabClick(e) {
				if (this.tabIndex == e) return;
				this.tabIndex = e;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f2f2;
		padding-bottom: 130upx;
	}

	.j_nav {
		background-color: #fff;
		display: flex;
		align-items: center;
		line-height: 90upx;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 500;
	}

	.j_n_item {
		flex: 1;
		text-align: center;
		position: relative;
	}

	.active {
		color: $base-color;
	}

	.active:after {
		border-bottom: 2px $base-color solid;
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40upx;
	}

	.j_list {
		// padding-top: 110upx;
		overflow: hidden;
	}

	.j_l_item {
		background-color: #fff;
		display: flex;
		align-items: center;
		height: 100upx;
		margin-top: 20upx;
		padding: 20upx;
	}

	.j_l_title {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.j_l_buttons text {
		color: #FF0000;
		margin-left: 10upx;
	}

	.j_l_buttons button {
		margin-left: 10upx;
	}
</style>
